<template>
  <div class="table-page">
    <div class="flex flex-j-s mb-10">
      <a-button type="text" :loading="loading" @click="getTableData(true)">
        <template #icon>
          <icon-refresh />
        </template>
        刷新当前数据
      </a-button>
    </div>
    <a-descriptions :column="1" bordered v-if="tableData">
      <a-descriptions-item label="黑名单设置">
        <div class="w-full overflow-x-auto pt-10">
          <div
            class="flex flex-a-c inline-block mb-10 mr-20"
            v-for="item in tableData.blackList"
            :key="item.nameListId"
          >
            <a-avatar :imageUrl="item.pic"> </a-avatar>
            <span class="ml-10">{{ item.wxName }}</span>
          </div>
          <span v-if="tableData?.blackList?.length === 0">--</span>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="白名单设置">
        <div class="w-full overflow-x-auto pt-10">
          <div
            class="flex flex-a-c inline-block mb-10 mr-20"
            v-for="item in tableData.whiteList"
            :key="item.nameListId"
          >
            <a-avatar :imageUrl="item.pic"> </a-avatar>
            <span class="ml-10">{{ item.wxName }}</span>
          </div>
          <span v-if="tableData?.whiteList?.length === 0">--</span>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="踢人时自动加入黑名单">
        <a-switch
          type="round"
          checked-color="#F53F3F"
          unchecked-color="#c9cdd4"
          disabled
          :checked-value="1"
          :unchecked-value="0"
          :model-value="tableData.manageConfig.isBlacklistSelect"
        >
          <template #checked> 开启中 </template>
          <template #unchecked> 未开启 </template>
        </a-switch>
      </a-descriptions-item>
      <a-descriptions-item label="踢昵称中包含以下关键字">
        <div class="flex flex-a-c">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :checked-value="1"
            :unchecked-value="0"
            :model-value="tableData.manageConfig.isNameKeywordSelect"
          >
            <template #checked> 开启中 </template>
            <template #unchecked> 未开启 </template>
          </a-switch>
          <span class="ml-20">关键字：</span>
          <a-tag class="mr-m" v-for="(item, index) in tableData.manageConfig.nameKeyword" :key="index">{{
            item
          }}</a-tag>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="踢昵消息内容中包含以下关键字">
        <div class="flex flex-a-c">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :checked-value="1"
            :unchecked-value="0"
            :model-value="tableData.manageConfig.isNameKeywordSelect"
          >
            <template #checked> 开启中 </template>
            <template #unchecked> 未开启 </template>
          </a-switch>
          <span class="ml-20">关键字：</span>
          <a-tag class="mr-m" v-for="(item, index) in tableData.manageConfig.contentKeyword" :key="index">{{
            item
          }}</a-tag>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="踢发文件">
        <a-switch
          type="round"
          checked-color="#F53F3F"
          unchecked-color="#c9cdd4"
          disabled
          :checked-value="1"
          :unchecked-value="0"
          :model-value="tableData.manageConfig.isFileSelect"
        >
          <template #checked> 开启中 </template>
          <template #unchecked> 未开启 </template>
        </a-switch>
      </a-descriptions-item>
      <a-descriptions-item label="踢发名片">
        <a-switch
          type="round"
          checked-color="#F53F3F"
          unchecked-color="#c9cdd4"
          disabled
          :checked-value="1"
          :unchecked-value="0"
          :model-value="tableData.manageConfig.isCardSelect"
        >
          <template #checked> 开启中 </template>
          <template #unchecked> 未开启 </template>
        </a-switch>
      </a-descriptions-item>
      <a-descriptions-item label="踢发链接分享白名单">
        <div class="flex flex-a-c">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :checked-value="1"
            :unchecked-value="0"
            :model-value="tableData.manageConfig.isUrlSelect"
          >
            <template #checked> 开启中 </template>
            <template #unchecked> 未开启 </template>
          </a-switch>
          <span class="ml-20">链接关键字：</span>
          <a-tag class="mr-m" v-for="(item, index) in tableData.manageConfig.urlKeyword" :key="index">{{ item }}</a-tag>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="踢发小程序白名单">
        <a-switch
          type="round"
          checked-color="#F53F3F"
          unchecked-color="#c9cdd4"
          disabled
          :checked-value="1"
          :unchecked-value="0"
          :model-value="tableData.manageConfig.isAppletSelect"
        >
          <template #checked> 开启中 </template>
          <template #unchecked> 未开启 </template>
        </a-switch>
      </a-descriptions-item>
      <a-descriptions-item label="踢炸群消息最大条数">
        <div class="flex flex-a-c">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :checked-value="1"
            :unchecked-value="0"
            :model-value="tableData.manageConfig.isRowsSelect"
          >
            <template #checked> 开启中 </template>
            <template #unchecked> 未开启 </template>
          </a-switch>
          <span class="ml-20">最大条数：{{ tableData.manageConfig.rows }}</span>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="踢炸群消息最大字数">
        <div class="flex flex-a-c">
          <a-switch
            type="round"
            checked-color="#F53F3F"
            unchecked-color="#c9cdd4"
            disabled
            :checked-value="1"
            :unchecked-value="0"
            :model-value="tableData.manageConfig.isLengthSelect"
          >
            <template #checked> 开启中 </template>
            <template #unchecked> 未开启 </template>
          </a-switch>
          <span class="ml-20">最大字数：{{ tableData.manageConfig.length }}</span>
        </div>
      </a-descriptions-item>
    </a-descriptions>
    <CircleDetail ref="detailRef" />
  </div>
</template>

<script setup>
import { detailManageInfo } from '@/apis'
import { deleteEmpty } from '@/utils/common'
import { Message } from '@arco-design/web-vue'

const props = defineProps(['userWechatId'])

const loading = ref(false)
const tableData = ref()
const detailRef = ref()

const listParams = reactive({
  userWechatId: undefined
})

// 获取列表数据
const getTableData = async (flag = false) => {
  try {
    loading.value = true
    listParams.userWechatId = props.userWechatId
    const res = await detailManageInfo(deleteEmpty(listParams))
    tableData.value = res.data
    if (flag) {
      Message.success('刷新成功')
    }
  } finally {
    loading.value = false
  }
}

watch(
  () => props.userWechatId,
  () => {
    getTableData()
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
